import React, { Component} from 'react'
import PropTypes from 'prop-types'
import { getCurrentNode } from '@/store/selectors'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux';
import actionsC from '@/store/actions.js'
import * as utils from '@/utils/index.js'
import PanleWrapper from '@/components/panel/panel-wrapper'
import Button from '@material-ui/core/Button';

let nodeActions=actionsC()

function isFlowType({key,value,styles}){
    return _.get(styles, [key])==value
}
class PanelFlow extends Component {
	constructor(props) {
		super(props);
		this.state={
            flowTypes: [
                {
                    key:'float',
                    value: 'left',
                    used: false
                },
                {
                    key:'float',
                    value: 'right',
                    used: false
                },
                {
                    key:'position',
                    value: 'relative',
                    used: false
                },
                {
                    key:'position',
                    value: 'absolute',
                    used: false
                },
            ]
		}
	}
	componentDidMount(){
	}
	componentWillReceiveProps(nextProp){
        const {currentNode} = nextProp
        let {flowTypes} = this.state
        flowTypes.forEach((item)=>{
            item.used = isFlowType({
                key: item.key,
                value: item.value,
                styles: currentNode.styles 
            })
        })
        this.setState({
            flowTypes
        })
    }
    handleItemClick(item, index){
        const {currentNode,dispatch,currentPath,nodeTree} = this.props
        let _currentNode = _.cloneDeep(currentNode)
        let {flowTypes}  = this.state
        if(!item.used){
            let style = {
                [flowTypes[index].key]: flowTypes[index].value
            }
            Object.assign(_currentNode.styles, style)
        }else{
            delete _currentNode.styles[item.key]
        }
        if(item.key=="float"){
            _currentNode.positionBy = [item.key,item.value]
        }

        dispatch.nodeUpdateByPath({
			path: currentPath,
			node: _currentNode
		});
    }
    componentDidUpdate(){
		// this.props.scrollRefresh()
	}
	render() {
		const {flowTypes} = this.state
		return (
			<PanleWrapper clsName="panel-flow" panelName="flow">
				<ul className="toggle-list">
					{utils.render_list(flowTypes,(item, index)=>{
						return(
							<li key={index}
                                className={classnames('toggle-item',{active: item.used})}
                                onClick={this.handleItemClick.bind(this, item, index)}
							>{item.key=="float" ? `${item.key}:${item.value}` : item.value}</li>
						)
					})}
				</ul>
			</PanleWrapper>
		)
	}
}

PanelFlow.defaultProps = {
};

function mapStateToProps(state) {
	return {
		currentNode:getCurrentNode(state),
		nodeTree: state.nodeTree,
		currentPath: state.currentPath,
		tag: state.tag
	}
}

function mapDispatchToProps(dispatch) {
	return {
		dispatch: bindActionCreators(nodeActions, dispatch)
	}
}

export default connect(
	mapStateToProps,
	mapDispatchToProps
)(PanelFlow)